<style type="text/css">
.sidebox {
    margin-right: 18px;
}

.wikicontext-module {
    background: none repeat scroll 0 0 white;
    border: 2px solid white;
    border-radius: 6px 6px 6px 6px;
    margin-bottom: 12px;
    overflow: hidden;
    position: relative;
}

</style>
<script type="text/javascript" language="javascript">
var datagrid = null;
$(function() {
     datagrid = $("#datagrid").r9jasonDataTable({
        // online1DataTable extra params
        "idTr" : true, // assign <tr id='xxx'> from 1st columns array(aoColumns);
        "extraParam" : function(aoData){ // pass extra params to server
                aoData.push( { "name": "userName", "value": $("#search_1").val() } );
                aoData.push( { "name": "email1", "value": $("#search_2").val() } );
                aoData.push( { "name": "lastName", "value": $("#search_3").val() } );
        },
        "reassignEvent" : function(){ // extra function for reassignEvent when JSON is back from server
            reassignDatagridEventAttr();
        },

        // datatables params
        "bLengthChange": true,
        "bFilter": false,
        "bProcessing": true,
        "bServerSide": true,
        "bAutoWidth": false,
        "sAjaxSource": "/zDataTable/helloWorld",
        "sPaginationType": "full_numbers",
        "aaSorting": [[0,'desc']],
        "aoColumns": [
                      { "sName" : "userId", "bVisible" : false,  "bSortable": false},
                        { "sName" : "userName",  "bSortable": false,
                            "fnRender" : function(oObj){
                                return oObj.aData[2];
                            }
                          },
                      { "sName" : "email1",  "bSortable": true},
                      { "sName" : "lastName",  "bSortable": false}
        ]
    });
}); // end function

function reassignDatagridEventAttr(){
	$("a[id=editLink]").click(function(event){
		// stop event
		event.preventDefault();

		// event.target is <a> itself, parent() is <td>, while parent().parent() get <tr>
		//var id = alert("id = " +$(event.target).parent().parent().attr("id"));
		var id = $(event.target).parent().parent().attr("id");

		$("#smsMessageTemplate\\.msgTplId").val(id);

		// set to false to refresh whole screen
	});
}
</script>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" style="width: 800px;">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-dgReinvestCps">Reinvest CPS</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button">
    <span class="ui-icon ui-icon-closethick">close</span></a></div>
<div class="ui-dialog-content ui-widget-content">
    <table class="display" id="datagrid" border="0" width="100%">
        <thead>
        <tr>
            <th>User ID[hidden]</th>
            <th>User Name</th>
            <th>Email</th>
            <th>Last Name</th>
        </tr>
        <tr>
            <td><input size="15" type="text" id="search_1" value="" class="search_init"/></td>
            <td><input size="15" type="text" id="search_2" value="" class="search_init" /></td>
            <td><input size="15" type="text" id="search_3" value="" class="search_init" /></td>
        </tr>
        </thead>
    </table>
</div>
</div>